<template>
	<a-drawer
		:title="formData.id ? '编辑试剂品类表' : '增加试剂品类表'"
		:width="600"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" layout="vertical">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item label="CAS编码：" name="casNo" :rules="[{ required: true, message: '请输入CAS编码' }]">
						<a-input v-model:value="formData.casNo" placeholder="请输入CAS编码" maxlength="12" allow-clear :disabled="formData.id"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="试剂名称：" name="reagentName" :rules="[{ required: true, message: '请输入试剂名称' }]">
						<a-input v-model:value="formData.reagentName" placeholder="请输入试剂名称" allow-clear maxlength="20"/>
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item label="试剂类型：" name="classId" :rules="[{ required: true, message: '请输入试剂名称' }]">
						<a-select v-model:value="formData.classId" placeholder="请选择试剂类型"
								  :options="storageTypeOptions" allowClear/>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item label="氧化还原类型：" name="redoxClassId" :rules="[{ required: true, message: '请选择氧化还原类型' }]">
						<a-select v-model:value="formData.redoxClassId" placeholder="请选择氧化还原类型"
								  :options="redoxClassOptions" allowClear/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="试剂形态：" name="formId" :rules="[{ required: true, message: '请选择试剂形态' }]">
						<a-select v-model:value="formData.formId" placeholder="请选择试剂形态"
								  :options="formTypeOptions" allowClear/>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item label="试剂单位：" name="unit" :rules="[{ required: true, message: '请选择试剂单位' }]">
						<a-select v-model:value="formData.unit" placeholder="请选择试剂单位" allowClear>
							<a-select-option value="0">毫升</a-select-option>
							<a-select-option value="1">克</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="试剂密度：" name="density" :rules="[{ required: true, message: '请输入试剂密度' }]">
						<a-input-number precision="2" v-model:value="formData.density" placeholder="请输入试剂密度" allow-clear addon-after="g/ml" style="width: 100%"/>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item label="最长离柜时限：" name="maxLimitLeave">
						<a-input v-model:value="formData.maxLimitLeave" placeholder="请输入最长离柜时限" allow-clear addon-after="分钟"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="取还是否需要称重：" name="weighNeedFlag" :rules="[{ required: true, message: '请选择取还是否需要称重' }]">
						<a-select v-model:value="formData.weighNeedFlag" placeholder="请选择取还是否需要称重" allowClear>
							<a-select-option value="0">否</a-select-option>
							<a-select-option value="1">是</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item label="误差最大值：" name="maxErrorValue" :rules="[{ required: true, message: '请输入误差最大值' }]">
						<a-input-number precision="2" v-model:value="formData.maxErrorValue" placeholder="请输入误差最大值" allow-clear addon-after="g" style="width: 100%"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="试剂瓶类型：" name="bottleType" :rules="[{ required: true, message: '请选择试剂瓶类型' }]">
						<a-select v-model:value="formData.bottleType" placeholder="请选择试剂瓶类型"
								  :options="bottleTypeOptions" allowClear/>
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item label="备注：" name="remarks">
						<a-textarea v-model:value="formData.remarks" placeholder="请输入备注" allow-clear :rows="4" maxlength="200"/>
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item label="MSDS描述：" name="msdsDesc">
						<a-textarea v-model:value="formData.msdsDesc" placeholder="请输入MSDS描述" allow-clear :rows="4" maxlength="200"/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</a-drawer>
</template>

<script setup name="bizReagentClassForm">
	import { message } from 'ant-design-vue'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import bizReagentClassApi from '@/api/biz/bizReagentClassApi'
	import tool from '@/utils/tool'
	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const submitLoading = ref(false)

	//类型
	let storageTypeOptions = tool.dictList('REAGENT_STORAGE_TYPE')
	//形态
	let formTypeOptions = tool.dictList('REAGENT_FORM_TYPE')
	//氧化还原
	let redoxClassOptions = tool.dictList('REAGENT_REDOX_TYPE')
	//试剂瓶类型
	let bottleTypeOptions = tool.dictList('REAGENT_BOTTLE_TYPE')

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
		}
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		visible.value = false
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				const formDataParam = cloneDeep(formData.value)
				bizReagentClassApi
					.bizReagentClassSubmitForm(formDataParam, !formDataParam.id)
					.then(() => {
						message.success('保存成功')
						onClose()
						emit('successful')
					})
					.finally(() => {
						submitLoading.value = false
					})
			})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
